<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>V3</title>
    <style>
      .divc {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button type="button" @click="fontSizeFun">fontSize</button>

      <div :style="styleObject">9011</div>
      <div
        :style="{ color:cv , backgroundColor :bcv,'font-size' : fontSize + 'px' }"
      >
        5678
      </div>

      <div class="static" :class="{divc:isActive}">123</div>

      {{ message }}
    </div>
  </body>
</html>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        fontSize: 36,
        bcv: "blue",
        cv: "red",
        message: "Hello Vue!",
        isActive: true,
      };
    },
    methods: {
      fontSizeFun(){
        this.fontSize = this.fontSize+20;
      }
    },
    computed: {
      styleObject() {
        return {
          color: "red",
          fontSize: this.fontSize +  "px",
        };
      },
    },
  }).mount("#app");
</script>
